{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>爱宠之家</title>
<link rel="icon" href="{% static 'img/funtion.ico' %}" type="image/ico">
<meta name="keywords" content="爱宠之家">
<link href="{% static 'pluigns/bootstrap-3.4.1/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/mate.min.css' %}" rel="stylesheet">
<link href="{% static 'css/style.min.css' %}" rel="stylesheet">
<style>
.lyear-wrapper {
    position: relative;
}
.lyear-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
}
.login-center {
    background: #fff;
    min-width: 38.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em 0;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
</style>
</head>

<body>
<div class="row lyear-wrapper">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header text-center">
        <a href="#"><h2><img src="{% static 'img/funtion.ico' %}">爱宠之家</h2></a>
      </div>
      <form method="post">
          {% csrf_token %}
        <div class="form-group has-feedback feedback-left">
{#          <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" />#}
           {{ form.name}}
{#            {{ form.user }}: {{ form}}#}
          <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
          <span style="color:red;">{{ form.name.errors.0 }}</span>
        </div>
        <div class="form-group has-feedback feedback-left">
{#          <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />#}
            {{ form.pwd }}
{#            {{ form.pwd }}: {{ form}}#}
          <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
            <span style="color:red;">{{ form.pwd.errors.0}} </span>
        </div>
        <div class="form-group has-feedback feedback-left row">
          <div class="col-xs-7">
{#            <input type="text" name="captcha" class="form-control" placeholder="验证码">#}
              {{ form.code }}
            <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
            <span style="color:red;">{{ form.code.errors.0}} </span>
          </div>
          <div class="col-xs-5">
{#               onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha"#}
{#            <img src="{% static 'img/captcha.png' %}" class="pull-right" id="captcha" style="cursor: pointer;" onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">#}
              <img src="/image/code/" id="image_code" style="width: 125px;height: 34px;"onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-block btn-primary" type="submit">登 录</button>
        </div>
      </form>
      <hr>
      <footer class="col-sm-12 text-center">
      </footer>
       <div>
           <a href="/form/login/" style="float: right">没有账号？立即注册</a>
       </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="{% static 'js/jquery-3.5.1.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript">;</script>
</body>
</html>